<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">图书信息</div>
                <div class="layui-card-body">

                    <form class="layui-form" id="myForm" method="post" lay-filter="stuform">
                        <div class="layui-form-item">

                            <div class="layui-inline">
                                <label class="layui-form-label">查找条件：</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="name" name="name" class="layui-input"/>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <button type="button" class="layui-btn" lay-submit lay-filter="setmyinfo">
                                    <i class="layui-icon">&#xe615;</i>查询
                                </button>
                                <button type="button" class="layui-btn" lay-submit lay-filter="reset">
                                    <i class="layui-icon">&#xe640;</i>清空
                                </button>
                            </div>
                        </div>
                    </form>

                    <table class="layui-hide" id="book-information-table" lay-filter="book-information-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="updata"><i class="layui-icon">&#xe642;</i>修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon">&#xe666;</i>刷新</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="updata">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:src="@{/static/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">
    layui.config({
        base: '../../static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','jquery','form'], function(){
        var table = layui.table,
            $ = layui.jquery,
            form = layui.form,
            that = this;

        table.render({
            elem: '#book-information-table'
            ,url: 'findAllBookInformation'
            ,cellMinWidth: 80
            ,toolbar: '#toolbarDemo'
            ,defaultToolbar: ['filter', 'exports', 'print']
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id',title: 'ID', width: 80, unresize: true, sort: true}
                ,{field:'bookName', title: '书名'}
                ,{field:'author', title: '作者', sort: true}
                ,{field:'press', title: '出版社', sort: true}
                ,{field:'typeName',title:'图书类型',sort: true}
                ,{field:'isbn', title: 'ISBN码', sort: true}
                ,{field:'intro', title: '简介'}
                ,{field:'price', title: '价格'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
        });

        form.on('submit(setmyinfo)', function (data) {
            var field = data.field;

            table.reload('book-information-table',{where: field})
        });
        form.on('submit(reset)', function (data) {
            where = "";
            $("input").val("");
            form.render();
            table.reload('book-information-table', {where: ''});
        });

        table.on('toolbar(book-information-table)',function (obj) {
            var checkStatus = table.checkStatus('book-information-table');
            var data = checkStatus.data;
            if(obj.event === 'del'){
                if(data.length < 1){
                    layer.msg('请至少选择一条书本信息！');
                }else{
                    layer.confirm('确定要删除选中的' + data.length + '条数据吗？', function (index) {
                        var str = "";
                        for (i = 0; i < data.length; i++) {
                            str += data[i].id + ",";
                        }
                        str = str.substring(0, str.length - 1);
                        $.post("delBookInformation", {ids: str}, function (result) {
                            table.reload('book-information-table', {where: that.where});
                            layer.close(index);
                            layer.msg(result.msg);
                        });
                    });
                }
            }else if(obj.event === 'add'){
                $.post("bookInformationEdit", function(data){
                    layui.use('layer', function(){
                        console.log(data);
                        layer.open({
                            title: '图书信息管理',
                            type: 2,
                            shade: false,
                            maxmin: true,
                            content: data,
                            area: ['893px', '400px'],
                            shadeClose: true,
                            btn: ['确定', '取消'],
                            yes:function(){	//虚拟化表单参数类型不是json，所以这里用的是回调提交
                            },
                            //弹出层打开回调
                            success: function(layero, index){
                                var form=layui.form;
                                //找到确定按钮，添加属性，变成提交按钮
                                layero.addClass('layui-form');
                                var submitBtn=layero.find('.layui-layer-btn0');
                                submitBtn.attr('lay-filter','formVerify').attr('lay-submit','');
                                layero.keydown(function(e){
                                    if(e.keyCode==13){
                                        submitBtn.click();
                                    }
                                });
                                form.on('submit(formVerify)', function(data){
                                    var body = layer.getChildFrame('body', index).contents().serialize();
                                    $.post("saveInformation?"+body, function(result){
                                        if(result.success){
                                            layer.close(index);
                                            table.reload('book-information-table',{where:that.where});
                                        }
                                        layer.msg(result.msg);
                                    });
                                });
                            }
                        })
                    })
                })
            }else if(obj.event === 'updata'){
                if (data.length != 1) {
                    layer.msg('请选择一行进行编辑');
                }else {
                    var id = data[0].id;
                    $.post("bookInformationEdit",{id:id}, function(data){
                        layui.use('layer', function(){
                            console.log(data);
                            layer.open({
                                title: '图书信息管理',
                                type: 2,
                                shade: false,
                                maxmin: true,
                                content: data+"?id="+id,
                                area: ['893px', '400px'],
                                shadeClose: true,
                                btn: ['确定', '取消'],
                                yes:function(){	//虚拟化表单参数类型不是json，所以这里用的是回调提交
                                },
                                //弹出层打开回调
                                success: function(layero, index){
                                    var form=layui.form;
                                    //找到确定按钮，添加属性，变成提交按钮
                                    layero.addClass('layui-form');
                                    var submitBtn=layero.find('.layui-layer-btn0');
                                    submitBtn.attr('lay-filter','formVerify').attr('lay-submit','');
                                    layero.keydown(function(e){
                                        if(e.keyCode==13){
                                            submitBtn.click();
                                        }
                                    });
                                    form.on('submit(formVerify)', function(data){
                                        var body = layer.getChildFrame('body', index).contents().serialize();
                                        $.post("saveInformation?"+body, function(result){
                                            if(result.success){
                                                layer.close(index);
                                                table.reload('book-information-table',{where:that.where});
                                            }
                                            layer.msg(result.msg);
                                        });
                                    });
                                }
                            })
                        })
                    })
                }
            }else if(obj.event === 'refresh'){
                table.reload('book-information-table',{where:that.where});
            }
        });

        table.on('tool(book-information-table)', function (obj) {
            var data = obj.data;
            var id = data.id;
            if(obj.event === 'updata'){
                $.post("bookInformationEdit",{id:data.id},function (data) {
                    layui.use('layer', function(){
                        layer.open({
                            title: '图书信息管理',
                            type: 2,
                            shade: false,
                            maxmin: true,
                            content: data+"?id="+id,
                            area: ['893px', '400px'],
                            btn: ['确定', '取消'],
                            yes:function(){	//虚拟化表单参数类型不是json，所以这里用的是回调提交
                            },
                            //弹出层打开回调
                            success: function(layero, index){
                                var form=layui.form;
                                //找到确定按钮，添加属性，变成提交按钮
                                layero.addClass('layui-form');
                                var submitBtn=layero.find('.layui-layer-btn0');
                                submitBtn.attr('lay-filter','formVerify').attr('lay-submit','');
                                layero.keydown(function(e){
                                    if(e.keyCode==13){
                                        submitBtn.click();
                                    }
                                });
                                form.on('submit(formVerify)', function(data){
                                    var body = layer.getChildFrame('body', index).contents().serialize();
                                    console.log(body);
                                    $.post("saveInformation?" + body, function(result){
                                        if(result.success){
                                            layer.close(index);
                                            table.reload('book-information-table',{where:that.where});
                                        }
                                        layer.msg(result.msg);
                                    });
                                });
                            }
                        })
                    })
                });
            }else if(obj.event === 'del'){
                layer.confirm('确定要删除吗？', function (index) {
                    $.post("delBookInformation",{ids:data.id},function (result) {
                        table.reload('book-information-table', {where: that.where});
                        layer.close(index);
                        layer.msg(result.msg);
                    })
                });
            }
        })
    });
</script>
</body>
</html>